<app-left-line
  [text]="title"
></app-left-line>

<div class="pay-list my-list">
  <div class="my-list-header">
    <span class="usageCode">用户编号: 
      <nz-select style="width: 260px;" 
        nzShowSearch nzAllowClear nzPlaceHolder="请选择用户编号" 
        [(ngModel)]="usageCode"
        (ngModelChange)="onUsageCodeChange($event)" 
        [nzLoading]="usageCodeLoading"
      >
        <nz-option *ngFor="let item of usageCodeInfoList" 
          [nzLabel]="item.usageCode" [nzValue]="item.usageCode"
        >
        </nz-option>
      </nz-select>
    </span>
    <span class="address">{{ address }}</span>
  </div>

  <div class="content card">
    <nz-table #smallTable nzSize="small"
      [nzData]="data"
      [nzLoading]="dataLoading"
      [nzShowPagination]="false"
      [nzFrontPagination]="false"
    >
      <thead>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of cols | dealObj: 'value'">{{ col }}</th>
          <th  *ngIf="title === '电子发票'">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data; let i = index">
          <td>{{ i + 1 }}</td>
          <td>{{ data['code'] }}</td>
          <td>{{ data['invoiceTime'] | dateFormat: 'format' }}</td>
          <td>{{ data['invoiceName'] }}</td>
          <td nzAlign="right">{{ data['invoiceNumber'] }}</td>
          <td nzAlign="right">{{ data['invoiceCode'] }}</td>
          <td nzAlign="right">{{ data['billAmount'] }}</td>
          <!-- <td>
            <nz-tag [nzColor]="invflagState[data['invflag']]?.color">
              {{ invflagState[data['invflag']]?.value }}
            </nz-tag>
          </td> -->
          <td *ngIf="title === '电子发票'">
            <!-- <button nz-button nzType="link" (click)="goEInvoice(data)"
            >申请开票</button> -->

            <button nz-button nzType="link" (click)="viewInvoice(data)">查看</button>
            <button nz-button nzType="link" (click)="downInvoice(data)">下载</button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <div class="my-pagination">
      <nz-pagination [nzTotal]="total" nzShowSizeChanger 
        [(nzPageSize)]="pageSize"
        [(nzPageIndex)]="pageNumber"
        (nzPageSizeChange)="getPayList()"
        (nzPageIndexChange)="getPayList()"
      >
      </nz-pagination>
    </div>
  </div>
</div>

<app-pdf-preview [showType]="true" [pdfUrl]="invoiceUrl" [(nzVisible)]="invoiceModal"
  [title]="'电子发票'"
  [okBtnText]="'下载'"
  (onOkBtn)="downInvoice()"
  [btnLoading]="dataLoading"
></app-pdf-preview>